<template>
  <div class="category_container">
    <div class="category_left_container">
      <div>
        <MenuItem v-for="(item,index) in category"
        :key="index"
        :item="item"
        :selectIndex="selectIndex"
        :index="index"
        @changeMenu="changeMenu"/>
      </div>
    </div>
    <div class="category_right_container"
    ref="rightContainer"
    @touchstart="touchstart">
      <div>
        <div v-for="(item,index) in category"
        :key="index" class="right_container"
        ref="right">
          <div class="header_container">{{item.cname}}</div>
          <div>
            <div v-for="(item,index) in subCategory"
            :key="index"
            class="sub_category_item_container">
              <div>
               <img :src="item.scpic" />
              </div>
              <div>{{item.subcname}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import MenuItem from  "../components/MenuItem";

export default {
  components:{
    MenuItem
  },
  data(){
    return{
      category:[],
      subCategory:[],
      selectIndex:0
    }
  },
  mounted(){
    axios.get("http://api.kudesoft.cn/tdk/category").then((res)=>{
      console.log(res);
      this.category  = res.data.data.data;
      this.subCategory = this.category[this.selectIndex].subcategories
    }).catch(()=>{

    })


    this.$refs.rightContainer.addEventListener("scroll",this.handleScroll)
  },
  methods:{
    changeMenu(index){
      this.$refs.rightContainer.removeEventListener("scroll",this.handleScroll)
      this.selectIndex  = index;
      // this.subCategory = this.category[this.selectIndex].subcategories;
      var views  = this.$refs.right;
      // console.log(views)
      var target = views[this.selectIndex];
      target.scrollIntoView({behavior:"smooth"})
    },
    handleScroll(event){
     var target = event.target
     console.log(target.scrollTop);
     // 滚动距离
     var scrollOffset = target.scrollTop;
     var views  = this.$refs.right;
     for(let index=0;index<views.length;index++){
       var tempView = views[index];
       var nextView = views[index+1];
      // console.log(tempView.offsetTop)
       if(scrollOffset>=tempView.offsetTop && scrollOffset<nextView.offsetTop){
         this.selectIndex =  index;
       } 
      }
    },
    touchstart(){
      this.$refs.rightContainer.addEventListener("scroll",this.handleScroll)
    }
  }
}
</script>

<style scoped>
.category_container
{
  width: 100%;
  height: 504px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.category_left_container
{
  width: 24%;
  height: 100%;
  border: 1px solid red;
  overflow: scroll;
}

.category_right_container
{
  width: 76%;
  height: 100%;
  border: 1px solid blue;
  overflow:scroll;
  display: inline-flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}

.sub_category_item_container
{
  width: 30%;
  height: 100px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.sub_category_item_container img
{
  width: 100%;
}

.header_container
{
  height: 50px;
  width: 100%;
}

.right_container
{
  border: 1px solid black;
}
</style>